<template>
<div class="list" ref="wrapper">
  <div class="scroll-content">
      <div class="area">
          <div class="title border-topbottom">当前城市</div>
          <div class="current-ad">
            <div class="button border-right">{{this.$store.state.city}}</div>
          </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button border-bottom" v-for="item of hotCities" :key = "item.id" @click="handleChangeCity(item.name)">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="area">
        <template v-for="(val,key,index) of cities">
          <!--使用循环获取的refs是一个数组，不是标准的dom元素-->
          <div class="title border-topbottom" :ref="key">{{key}}</div>
          <ul class="item-list">
            <li class="item border-bottom" v-for="item of val" :key="item.id" @click="handleChangeCity(item.name)"> {{ item.name }} </li>
          </ul>
        </template>

      </div>
    </div>
</div>
</template>

<script>
    import BScroll from 'better-scroll'
    export default {
        props:{
          hotCities:{
            type:Array
          },
          cities:{
            type:Object
          },
          letter:{
            type:String
          },
          index:{
            type:String
          }
        },
        name: "CityList",
        methods:{
            handleChangeCity(city){
              // 调用store里的actions,当有延迟操作或者ajax数据请求的时候需要调用actions的方法
              //   this.$store.dispatch("changeCity",city)

              // 客户端里的数据（几大数据类型）操作，直接调用mutations
              // 这里的数据是直接在dom页面上取的，并不是服务器获取来的数据，这数据是现成的，不需要异步操作
                this.$store.commit("changeCityMuta",city)
                this.$router.push("/")
            }
          },
        mounted(){
          // 这句话相当于，当$refs.wrapper的内容被渲染了再实例化BScroll类
          // 注意，凡是用到$refs都要注意数据与dom的异步问题。最好都在nextTick里操作dom
          this.$nextTick(()=>{
            // 1.npm install better-scroll --save
            // 2.import BScroll from 'better-scroll'
            //3.添加一个wrapper的ref，内容要被这个wrapper包裹起来
            // 3.this.scroll = new BScroll(this.$refs.wrapper,{})
            this.scroll = new BScroll(this.$refs.wrapper,{})
          })
        },
        watch:{
          letter(newval,oldval){

            if(newval){
              this.scroll.scrollToElement(this.$refs[newval][0])
            }

          },
          index(newval,oldval){
            if(newval){
              this.scroll.scrollToElement(this.$refs[newval][0])
            }
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .list
    position absolute
    top 1.54rem
    bottom:0
    left 0
    right:0
    overflow hidden
    z-index -1
  .border-topbottom
  &:before
    border-color: #cccccc
  &:after
    border-color: #cccccc
  .title
    line-height: 0.6rem
    background rgb(245, 245, 245);
    padding-left 0.2rem
    color #666
    font-size 0.26rem
  .button-list
    width: 100%
    height auto
    display flex
    flex-wrap wrap
    justify-content space-between
    overflow hidden
    position: relative
  .button-list:before
      width: 33.33%;
      left: 33.33%;
      content: '';
      position: absolute;
      height 100%
      border-left: .02rem solid #ddd;
      border-right: .02rem solid #ddd;
  .current-ad
    width:100%
  .current-ad .button,.button-list .button
    width:33.33%
    box-sizing border-box
    text-align center
    line-height 0.88rem
    font-size 0.28rem
    margin-bottom -1px
  .item-list .item
    line-height:0.76rem
    color: #666
    padding-left 0.2rem
    margin-bottom -1px
</style>
